<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框杀杀杀
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="carFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="carFormData.carName" placeholder="请输入汽车名字"></el-input>
                </el-form-item>
<!--                <el-form-item >-->
<!--                    <el-input v-model="userFormData.loginName" placeholder="请输入昵称"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item >-->
<!--                    <el-input v-model="userFormData.email" placeholder="请输入邮箱"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item >-->
<!--                    <el-input v-model="userFormData.phone" placeholder="请输入电话"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" @click="chaxun">查询</el-button>
                    <el-button type="primary" @click="insert">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="carName"
                            label="车名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="typeName"
                            label="种类">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="品牌">
                    </el-table-column>
                    <el-table-column
                            prop="configname"
                            label="配置">
                    </el-table-column>
                    <el-table-column
                            prop="intro"
                            label="排量">
                    </el-table-column>
                    <el-table-column
                            prop="vin"
                            label="座位数">
                    </el-table-column>
                    <el-table-column
                            prop="buyPrice"
                            label="进价">
                    </el-table-column>
                    <el-table-column
                            prop="shopname"
                            label="4s店">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            :formatter="zhuangtaima"
                            label="状态">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="租价">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="selectById(scope.row.id)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteById(scope.row.id)"></el-button>
<!--                            <el-button type="warning" icon="el-icon-star-off" circle @click="showUserRole(scope.row.userId)"></el-button>-->
                        </template>
                    </el-table-column>
                </el-table>

                <!--                分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>

        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%"
        >

<!--            model:表单数据-->
            <el-form  label-width="80px" :model="carForm" >
                                <el-form-item label="id" style="display: none">
                                    <el-input v-model="carForm.id" ></el-input>
                                </el-form-item>
                <el-form-item label="车名" >
                    <el-input v-model="carForm.carName"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="carForm.type" placeholder="请选择">
                        <el-option
                                v-for="item in typeArray"
                                :key="item.id"
                                :label="item.typeName"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌">
                    <el-select v-model="carForm.brandId" placeholder="请选择">
                        <el-option
                                v-for="items in brandsArray"
                                :key="items.id"
                                :label="items.name"
                                :value="items.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="配置">
                  <el-select v-model="carForm.configId" placeholder="请选择">
                      <el-option
                      v-for="itemss in configArray"
                      :key="itemss.id"
                      :label="itemss.configname"
                      :value="itemss.id"
                      >
                      </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="门店">
                    <el-select v-model="carForm.shopId" placeholder="请选择">
                        <el-option
                                v-for="itemsss in shopArray"
                                :key="itemsss.id"
                                :label="itemsss.shopname"
                                :value="itemsss.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排量" >
                    <el-input v-model="carForm.intro"></el-input>
                </el-form-item>
                <el-form-item label="座位数" >
                    <el-input v-model="carForm.vin"></el-input>
                </el-form-item>
                <el-form-item label="进价" >
                    <el-input v-model="carForm.buyPrice"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="carForm.state" placeholder="请选择">
                        <el-option
                                v-for="itemes in statusArray"
                                :key="itemes.id"
                                :label="itemes.status"
                                :value="itemes.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="租价" >
                    <el-input v-model="carForm.price"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="formSubmit">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Allcar",
        data(){
            return {
                editDialogVisible:false,
                //条件搜索对象
                carFormData:{},
                //表格数据
                tableData:[],
                //每页显示的条数
                pageSize: 5,
                //当前的显示的页码
                currentPage:1,
                //总条数
                total:0,
                //添加表:
                carForm:{},
                configArray:[],
                brandsArray:[],
                shopArray:[],
                typeArray:[],
                statusArray:[{id:1,status:"可租"},{id:2,status:"维修中"},{id:3,status:"租出"},{id:4,status:"不可用"}],

            }
        },
        created() {
             this.selectAllCar();
             this.allselectlist(); //全部下拉框
        },
        methods:{
            insert(){
                this.editDialogVisible=true;
                this.carForm={};
            },
            deleteById(id){
                var that=this;
              this.$http.delete("rents?id="+id).then(function (returnResult) {
                   that.$message.success("删除成功");
                   that.selectAllCar();
              })
            },
            selectById(id){
                var that=this;
                this.$http.get(`rents/selectById/${id}`).then(function (returnResult) {
                    that.editDialogVisible=true;
                          that.carForm=returnResult.data.result.tbcar

                })
            },
            formSubmit(){
                var that=this;
                if(this.carForm.id!=null){
                   this.$http.put("rents/update",this.carForm).then(function (returnResult) {
                       that.editDialogVisible=false;
                       that.carForm={};
                       that.selectAllCar();
                   })
                }else {
                    this.$http.post("rents/insert", this.carForm).then(function (returnResult) {
                        that.editDialogVisible = false;
                        that.selectAllCar();
                    })
                }
            },
            allselectlist(){
                var that=this;
               this.$http.get("rents/config/selectall").then(function (returnResult) {
                   that.configArray=returnResult.data.result.allCarConfig;
               })
                this.$http.get("/rents/brand/selectall").then(function (returnResult) {
                    that.brandsArray=returnResult.data.result.allBrands;
                })
                this.$http.get("/rents/type/selectall").then(function (returnResult) {
                    that.typeArray=returnResult.data.result.allCarTypes;
                })
                this.$http.get("/rents/shop/selectall").then(function (returnResult) {
                    that.shopArray=returnResult.data.result.allCarShops;
                })
            },
            chaxun(){
              this.selectAllCar();
            },
             selectAllCar(){
                 var that=this;
                 this.$http.post(`/rents/car/${this.currentPage}/${this.pageSize}`,this.carFormData).then(function (returnResult) {
                           console.log(returnResult)
                     that.tableData=returnResult.data.result.records;
                           that.total=returnResult.data.result.total;
                 })
             },
            handleSizeChange(v){
                this.pageSize=v;
                this.selectAllCar();
            },
            handleCurrentChange(v){
                 this.currentPage=v;
              this.selectAllCar();
            },
            zhuangtaima(row,column){
                 var status=row.state;
                 if(status==1){
                     return '可租'
                 }
                if(status==2){
                    return '维修中'
                }
                if(status==3){
                    return '租出'
                }
                if(status==4){
                    return '损坏'
                }
            }

        }
    }
</script>

<style scoped>

</style>